<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue底层原理核心代码</title>
</head>
<body>
    <div id="app">
    </div>
    <script>
        let data = {shuzi:0}
        let active 
        // active = ()=>{
        //     console.log('watcher1')
        //     app.innerHTML = data.shuzi 
        // }
        function xiangyingshi(data) {
            console.log('这里开始核心逻辑了')
            for(let key in data) {
                let value = data[key] //对象对应的值
                let dep = [ ]
                Object.defineProperty(data,key,{
                    get(){
                        console.log('我进入Object.definePropertyget里面了')
                        if(active) {
                            dep.push(active)
                        }
                        return value
                    },
                    set(newValue) {
                        console.log('我进入Object.defineProperty set里面了')
                        value = newValue
                        dep.forEach(fn =>fn())
                    }
                })
            }
        }
        xiangyingshi(data)
        const watcher = (fn)=>{
            console.log('watcher2')
            active = fn 
            fn()
            active = null
        }
        watcher(()=>{
            console.log('watcher1')
           
            app.innerHTML = data.shuzi 
        })
     
    </script>
</body>
</html>